// 如果出现 Invalid hook call. Hooks can only be called inside of the body of a function
// 尝试
/**
 * module.exports = {
  webpack: {
    // 别名
    alias: {
      'react': path.resolve('./node_modules/react'),
    },
  }
}
 */
import React, { useState, useEffect } from 'react'
import './capitalflow.scss'
import moment from 'moment'
import { DatePicker, Empty } from 'antd'
import { Chart, Point, Line, Tooltip, Legend } from 'bizcharts'
import { serviceGetCapitalFlowPrice } from '../../../../request/capitalflow'

type DataProp = {
  date: string
  name: string
  price: string
  type: number
}

const { RangePicker } = DatePicker
const FORMAT = 'YYYY-MM-DD'
// moment()要获取当前的日期和时间
// moment().subtract(Number, String);
// 对现在的时间减去7天
const DEFAULT_DATE: any = [moment().subtract(7, 'day'), moment()]

function MoneyAccessChart() {
  const [data, setData] = useState<DataProp[]>([])
  const [totalPrice, setTotalPrice] = useState(0)

  function getData(params?: object) {
    serviceGetCapitalFlowPrice(params).then(res => {
      if (res.data.success) {
        let price = 0
        const data = res.data.data.map((item: any) => {
          const amount = Number(item.price)
          price += amount
          item.date = item.date.slice(5)
          item.price = amount
          item.priceLabel = '￥' + amount.toFixed(2)
          return item
        })
        setData(data)
        setTotalPrice(price)
      }
    })
  }

  function handleChangeDate(dates: unknown, dateStrings: [string, string]) {
    getData({
      startDate: dateStrings[0],
      endDate: dateStrings[1],
    })
  }
  useEffect(() => {
    getData()
  }, [])

  return (
    <div className="money-access">
      <h2 className="title">
        资金流动
        <RangePicker
          className="date-picker"
          format={FORMAT}
          defaultValue={DEFAULT_DATE}
          onChange={handleChangeDate}
        ></RangePicker>
      </h2>
      {totalPrice > 0 ? (
        <Chart
          data={data}
          height={400}
          padding={[30, 20, 60, 40]}
          autoFit
          interactions={['element-active']}
        >
          {/* 图例，根据数据中name字段的不同值来显示相应的图例 */}
          <Legend
            backgroud={{
              padding: [5, 100, 5, 36],
              style: {
                fill: '#eaeaea',
                stroke: '#fff',
              },
            }}
          />
          {/* 标出来的点 */}
          {/* color通过数据中name字段的不同值来显示不同的颜色 */}
          <Point position="date*price" color="name" shape="circle"></Point>
          {/* 折线图形，一般用于绘制折线图，曲线图,雷达图，阶梯图等。 */}
          <Line
            shape="smooth"
            position="date*price"
            color="name"
            label={[
              'price',
              value => {
                return { content: () => '￥' + Number(value) }
              },
            ]}
          ></Line>
          {/* 提示信息 */}
          <Tooltip shared showCrosshairs />
        </Chart>
      ) : (
        <div className="no-data">
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        </div>
      )}
    </div>
  )
}

export default React.memo(MoneyAccessChart)
